<template>
  <div :style="{
              padding: '24px',
              background: '#fff',
              postion: 'absolute',
              height: '90%',
            }">
    <a-space direction="vertical" size="Large">
      <div>
        <a-form-model layout="inline" :model="formInline">
          <a-form-model-item label="规则编号:">
            <a-input
              v-model="formInline.rule"
              placeholder="规则编号"
              style="width: 280px"
            >
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="使用状态:">
            <a-select
              v-model="formInline.state"
              style="width: 280px"
              placeholder="请选择"
            >
              <a-select-option value="1"> 已上线 </a-select-option>
              <a-select-option value="2"> 运行中 </a-select-option>
              <a-select-option value="3"> 异常 </a-select-option>
              <a-select-option value="4"> 关闭 </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary"> 查询 </a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="resetForm()">重置</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="link" v-show="showSrech" @click="changShow()">
              展开 <a-icon type="down"
            /></a-button>
            <a-button type="link" v-show="!showSrech" @click="changShow()">
              收起 <a-icon type="up"
            /></a-button>
          </a-form-model-item>
          <a-form-model-item label="服务调用次数:" v-show="!showSrech">
            <a-input
              v-model="formInline.sever"
              placeholder="根据服务调用次数搜索"
              style="width: 280px"
            >
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="描述:" v-show="!showSrech">
            <a-input
              v-model="formInline.describe"
              placeholder="根据描述搜索"
              style="width: 280px"
            >
            </a-input>
          </a-form-model-item>
          <a-form-model-item label="更新时间:" v-show="!showSrech">
            <a-input
              v-model="formInline.datetime"
              placeholder="根据更新时间搜索"
              style="width: 280px"
            >
            </a-input>
          </a-form-model-item>
        </a-form-model>
      </div>

      <div style="float: left">
        <a-button type="primary" @click="showModal(0)">
          <a-icon type="plus" />
          新建
        </a-button>
        <a-button
          type="danger"
          v-show="selectNum > 0"
          style="margin-left: 10px"
        >
          删除
        </a-button>
        <a-modal
          :title="title"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk(0)"
          @cancel="handleCancel"
        >
          <a-form-model
            ref="ruleForm"
            :model="ruleForm"
            :rules="addRules"
            v-bind="layout"
          >
            <a-form-model-item has-feedback label="编码规则" prop="rule">
              <a-input
                v-model="ruleForm.rule"
                autocomplete="off"
                placeholder="请输入编码规则"
                valu
              >
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback label="描述" prop="describe">
              <a-textarea
                v-model="ruleForm.describe"
                autocomplete="off"
                allow-clear
                placeholder="请输入描述"
              >
              </a-textarea>
            </a-form-model-item>
            <a-form-model-item has-feedback label="服务调用次数" prop="sever">
              <a-input
                v-model="ruleForm.sever"
                autocomplete="off"
                placeholder="该服务调用的次数"
              >
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback label="状态" prop="state">
              <a-select v-model="ruleForm.state" placeholder="请选择该服务状态">
                <a-select-option value="1"> 已上线 </a-select-option>
                <a-select-option value="2"> 运行中 </a-select-option>
                <a-select-option value="3"> 异常 </a-select-option>
                <a-select-option value="4"> 关闭 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div>

      <a-affix :offset-top="10" style="position: fixed; right: -5px; top: 35%">
        <a-button type="primary">
          <a-icon type="setting" />
        </a-button>
      </a-affix>

      <div style="width: 100%; margin-top: 10px">
        <a-alert
          :message="
            '已选择: ' +
            this.selectNum +
            ' 服务调用次数总计 ' +
            this.selectAllSevers +
            ' 次'
          "
          type="info"
          show-icon
        />
        <!-- <a-tag color="blue" style="width: 100%">
          已选择: {{ this.selectNum }} 服务调用次数总计 {{ selectAllSevers }}次
        </a-tag>  -->
      </div>

      <div>
        <a-table
          :columns="columns"
          :data-source="data"
          :row-selection="rowSelection"
          @change="onChange"
        >
          <ul slot="state" slot-scope="text">
            <li style="color: #409eff" v-if="text == '2'">
              <span class="state_span">运行中</span>
            </li>
            <li style="color: #67c23a" v-else-if="text == '1'">
              <span class="state_span">已上线</span>
            </li>
            <li style="color: gray" v-else-if="text == '4'">
              <span class="state_span">关闭</span>
            </li>
            <li style="color: red" v-else-if="text == '3'">
              <span class="state_span">异常</span>
            </li>
          </ul>
          <span slot="sever" slot-scope="text">{{ text }}次</span>

          <template slot="action" slot-scope="text, record">
            <a-button
              type="link"
              slot="action"
              style="padding-left: 0%; padding-right: 0%"
              @click="showModal(record)"
            >
              配置
            </a-button>
            <a-divider slot="action" type="vertical" />
            <a-button
              type="link"
              slot="action"
              style="padding-left: 0%; padding-right: 0%"
            >
              订阅报警
            </a-button>
          </template>
        </a-table>
      </div>
    </a-space>
  </div>
</template>

<script>
const columns = [
  {
    title: "#",
    dataIndex: "id",
    width: 80,
    key: "id",
    // id自增
    customRender: function (text, record, index) {
      return index + 1;
    },
  },
  {
    title: "规则编码",
    dataIndex: "rule",
    width: 100,
    key: "rule",
  },
  {
    title: "描述",
    dataIndex: "describe",
    key: "describe",
    ellipsis: true,
  },
  {
    title: "服务调用次数",
    dataIndex: "sever",
    key: "sever",
    scopedSlots: { customRender: "sever" },
    sorter: (a, b) => {
      let aSever = a.sever - 0;
      let bSever = b.sever - 0;
      return aSever - bSever;
    },
    // 支持的排序方式
    // 默认点击排序按钮是：无排序、顺序、倒序、
    sortDirections: ["descend", "ascend", ""],
    // 配置默认是无序
    defaultSortOrder: "",
  },
  {
    title: "状态",
    dataIndex: "state",
    key: "state",
    scopedSlots: { customRender: "state" },
  },
  {
    title: "更新时间",
    dataIndex: "datetime",
    key: "datetime",
    scopedSlots: { customRender: "datetime" },
    sorter: (a, b) => {
      let aTime = new Date(a.datetime).getTime();
      let bTime = new Date(b.datetime).getTime();
      return aTime - bTime;
    },
    sortDirections: ["descend", "ascend", ""],
    defaultSortOrder: "",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    ellipsis: true,
    scopedSlots: { customRender: "action" },
  },
];

const data = [
  {
    key: "1",
    rule: "No 1",
    describe: "这是...",
    sever: "544",
    state: "3",
    datetime: "2022-07-28 15:03:48",
  },
  {
    key: "2",
    rule: "No 2",
    describe: "这是...",
    sever: "156",
    state: "1",
    datetime: "2022-07-21 15:03:48",
  },
  {
    key: "3",
    rule: "No 3",
    describe: "这是...",
    sever: "95",
    state: "2",
    datetime: "2022-07-22 15:03:48",
  },
  {
    key: "4",
    rule: "No 3",
    describe: "这是...",
    sever: "956",
    state: "4",
    datetime: "2022-07-24 15:03:48",
  },
];

import { formatDate } from "@/utils/GetDateTime";
export default {
  name: "findlist",
  components: {},
  data() {
    // 新建表单中 服务调用次数 的校验
    let validateSever = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入该服务调用次数"));
      } else if (!/^[0-9]*$/.test(value)) {
        callback(new Error("该项只能为数字"));
      } else {
        callback();
      }
    };
    return {
      formInline: {
        rule: "",
        describe: "",
        sever: "",
        state: "",
        datetime: "",
      },
      addRules: {
        describe: [
          {
            required: true,
            min: 1,
            max: 100,
            message: "描述语在1-100之内",
            trigger: "change",
          },
        ],
        state: [
          { required: true, message: "状态不能为空!", trigger: "change" },
        ],
        sever: [{ validator: validateSever, trigger: "change" }],
      },
      ruleForm: {
        rule: "",
        describe: "",
        sever: "",
        state: "",
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },
      data,
      columns,
      selectNum: 0,
      selectAllSevers: 0,
      selectedRowKeys: [],
      visible: false,
      confirmLoading: false,
      showSrech: true,
      editKey: "",
      title: "新建",
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this; // selectedRowKeys和取消选中有关，我也看不懂
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys; 
          this.selectNum = selectedRows.length;
          // 清空变量后再计算，即每一次变动都从新计算所有次数
          let allSevers = 0;
          for (let i = 0; i < this.selectNum; i++) {
            allSevers += selectedRows[i].sever - 0;
          }
          this.selectAllSevers = allSevers;
        },
      };
    },
  },
  methods: {
    onChange() {
      this.selectNum = 0;
      this.selectAllSevers = 0;
      this.selectedRowKeys = []; //取消可选
    },
    // 弹窗是否可显示
    showModal(record) {
      if (record != 0) {
        this.title = "配置";
        let edit = JSON.parse(JSON.stringify(record));
        this.editKey = edit.key;
        this.ruleForm.rule = edit.rule;
        this.ruleForm.describe = edit.describe;
        this.ruleForm.state = edit.state;
        this.ruleForm.sever = edit.sever;
        console.log(edit);
        this.visible = true;
      } else {
        this.title = "新建";
        this.visible = true;
      }
    },
    // 新建/配置 弹窗 确认 按钮
    handleOk() {
      if (this.editKey != "") {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.visible = false;
          }
        });
      } else {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.visible = false;
            this.data.push({
              rule: this.ruleForm.rule,
              describe: this.ruleForm.describe,
              sever: this.ruleForm.sever,
              state: this.ruleForm.state,
              datetime: formatDate("YY-MM-DD hh:mm:ss"),
            });
          }
        });
      }
      this.ruleForm = {};
    },
    // 新建弹窗 取消 按钮
    handleCancel() {
      this.visible = false;
      this.ruleForm = {};
    },
    // 改变展开状态
    changShow() {
      this.showSrech = !this.showSrech;
    },
    // 查询表单重置
    resetForm() {
      this.formInline = {};
    },
  },
};
</script>
<style>
ul li::marker {
  font-size: 20px;
}
.state_span {
  color: #000;
}
</style>